<template>
  <el-form ref="formItem" :model="formItem" :rules="rules" label-width="100px">
    <el-row>
      <el-col>
        <el-form-item label="学生班级:" prop="studentClass">
          <el-tree
            ref="tree"
            :data="nodes"
            :props="defaultProps"
            :filter-node-method="filterNodeHandler"
            class="filter-tree"
            highlight-current
            accordion
            @node-click="handleNodeClick"
            @current-change="(value, node) => (selected = value)"
          >
            <div slot-scope="{ data }" class="custom-tree-node">
              <div class="name">
                {{ data.gradeName }}
              </div>
            </div>
          </el-tree>
          <!-- <el-input
            v-model="formItem.studentClass"
            :disabled="disabled"
            placeholder="请输入学生班级"
          /> -->
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="学生姓名:" prop="studentName">
          <el-input
            v-model="formItem.studentName"
            placeholder="请输入学生姓名"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="性别:" prop="studentSex">
          <el-select
            v-model="formItem.studentSex"
            placeholder="性别"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="备注:" prop="remark">
          <el-input
            v-model="formItem.remark"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { deepMerge } from '@folder-inside-utils'

import * as GradeAPI from '@src/demo/api/classGrade'
import * as DictionaryAPI from 'tdf-ui-vue-tdfbase/src/tdf-sys/api/system-management/dictionary'


export default {
  name: 'Add',
  props: {
    allSexTypeChild: {
      // 这里的datas用于接收
      type: Array, // 我们接收验证的是 也可以验证别的类型
    },
  },
  data() {
    const queryCriteria = this.initQueryCriteria()
    return {
      selected: null,
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      nodes: [],
      disabled: false,
      formItem: {
        studentClass: '',
        studentName: '',
        studentValue: '',
        studentSex: '',
        remark: '',
        classId: '',
      },
      arrayDataStatus: false,
      // 检测
      rules: {
        studentName: [
          { required: true, message: '请输入学生名称', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'change',
          },
        ],
        studentValue: [
          { required: true, message: '请输入学生成绩', trigger: 'blur' },
        ],
      },
      allSexType: [
        { id: '5146791b9adf45caa587693ab0c0d12e', name: '女' },
        { id: 'b35e15eafb9d4918a83ebd7ce9e1509c', name: '男' },
      ],
      options: [

      ],
    }
  },
  created() {
    this.selected = null
    this.queryAllHandler()
    const params = {
        filters: {},
        page: 1,
        pageSize: 10,
        sorts: []
      };
    params.filters['parentId'] = 'c50aa804aa8000c9c474f930d794116e'
    params.sorts = [{ fieldName: 'codeIndex', direction: 'desc' }]
    DictionaryAPI.queryAllDictionaries(params).then((data) => {
      this.allSexType = data.list
      console.log(this.allSexType)
      this.allSexType.forEach(element => {
        this.options.push({
          label:element.name,
          value:element.id
        })
        
      });
    })
  },
  methods: {
    initQueryCriteria(form = {}) {
      if (this.selected) {
        return deepMerge(form, {
          deptId: this.selected.id,
        })
      } else {
        return deepMerge(form, {
          deptId: 'null',
        })
      }
    },
    filterNodeHandler(value, data) {
      if (!value) return true
      const show = data.deptName.indexOf(value) !== -1
      if (!show && this.selected && this.selected.id === data.id) {
        this.selected = null
      }
      return show
    },
    handleNodeClick(data) {
      this.selected.id = data.id

      this.formItem.classId = this.selected.id
      this.formItem.studentClass = data.gradeName
    },
    queryAllHandler() {
      GradeAPI.queryAllClassGrades({}).then((data) => {
        this.nodes = data
      })
    },
    submitForm() {
      var status = false
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          status = true
        } else {
          status = false
        }
      })
      return status
    },
  },
}
</script>
